<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>即时通讯</title>
<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script src="/js/sockjs.min.js"></script>
<script src="/js/stomp.min.js"></script>
</head>
<body>
    <h2>即时通讯</h2>
    <form id="cvseaForm">
        <textarea rows="4" cols="60" name="text" id="content"></textarea><br/>
        <input type="submit" value="发送" />
    </form><br/>
    <input type="button" value="断开连接" id="stop" />
    <input style="margin-left:20px;" type="button" value="连接" id="connect" />
    <input style="margin-left:20px;" type="button" value="clear" id="clear" />
    <ul id="response"></ul>

    <!-- <script th:inline="javascript"> -->
    <script>
        var sock = new SockJS("endpointChat");//连接SockJS的endpoint名称为"endpointChat"
        var stomp = Stomp.over(sock);//使用STMOP子协议的WebSocket客户端
        stomp.connect("guest", "guest", function(frame) {//连接WebSocket服务端
        	console.log('Connected:' + frame);
            stomp.subscribe("/user/queue/notifications", handleNotification);
        });

        $("#cvseaForm").submit(function(e) {
            e.preventDefault();
            if(sock)
            var content = $("#content").val();
            if(content=="" || content==null){
            	content = "null";
            }
            showLocal(content);
            sendSpittle(content);//不允许传空字符串
        });

        function handleNotification(message) {
            $("#response").append("<li>Re:" + message.body + "</li>");
        }

        function showLocal(message) {
            $("#response").append("<li>Local:" + message + "</li>");
        }
        
        function sendSpittle(message) {
            stomp.send("/chat", {}, message);
        }

        $("#stop").click(function() {
        	console.log('====sock:' + sock);
            sock.close();
            console.log('====sock:' + sock);
        });

        $("#clear").click(function() {
        	$("#response li").remove();
        });

        $("#connect").click(function() {
			
        });
    </script>
</body>
</html>